<template>
  <div id="userLayout" :class="['user-layout-wrapper', device]" class="particle-network-animation">
    <div class="container">
      <div class="top">
        <div class="header">
          <router-link :to="{ name: 'Index' }">Logo(链接到首页)</router-link>
<!--            <img src="~@/assets/loginLogo.png" class="logo" alt="logo">-->
        </div>
        <div class="desc">

        </div>
      </div>

      <route-view :key="key"></route-view>


    </div>
  </div>
</template>

<script>
import RouteView from './RouteView'
import { mixinDevice } from '@/utils/mixin'

export default {
  name: 'UserLayout',
  components: { RouteView },
  mixins: [mixinDevice],
  data () {
    return {}
  },
  computed:{
    key(){
      return this.$route.path + Math.random();
    }
  },
  mounted () {
    document.body.classList.add('userLayout')
    this.initCanvas()
  },
  methods: {
      initCanvas:function(){
          var ParticleNetworkAnimation, PNA;
          ParticleNetworkAnimation = PNA = function() {};

          PNA.prototype.init = function(element) {
              this.$el = $(element);

              this.container = element;
              this.canvas = document.createElement('canvas');
              this.sizeCanvas();
              this.container.appendChild(this.canvas);
              this.ctx = this.canvas.getContext('2d');
              this.particleNetwork = new ParticleNetwork(this);

              this.bindUiActions();

              return this;
          };

          PNA.prototype.bindUiActions = function() {
              $(window).on('resize', function() {
                  // this.sizeContainer();
                  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                  this.sizeCanvas();
                  this.particleNetwork.createParticles();
              }.bind(this));
          };

          PNA.prototype.sizeCanvas = function() {
              this.canvas.width = this.container.offsetWidth;
              this.canvas.height = this.container.offsetHeight;
          };

          var Particle = function(parent, x, y) {
              this.network = parent;
              this.canvas = parent.canvas;
              this.ctx = parent.ctx;
              this.particleColor = returnRandomArrayitem(this.network.options.particleColors);
              this.radius = getLimitedRandom(1.5, 2.5);
              this.opacity = 0;
              this.x = x || Math.random() * this.canvas.width;
              this.y = y || Math.random() * this.canvas.height;
              this.velocity = {
                  x: (Math.random() - 0.5) * parent.options.velocity,
                  y: (Math.random() - 0.5) * parent.options.velocity
              };
          };

          Particle.prototype.update = function() {
              if (this.opacity < 1) {
                  this.opacity += 0.01;
              } else {
                  this.opacity = 1;
              }
              // Change dir if outside map
              if (this.x > this.canvas.width + 100 || this.x < -100) {
                  this.velocity.x = -this.velocity.x;
              }
              if (this.y > this.canvas.height + 100 || this.y < -100) {
                  this.velocity.y = -this.velocity.y;
              }

              // Update position
              this.x += this.velocity.x;
              this.y += this.velocity.y;
          };

          Particle.prototype.draw = function() {
              // Draw particle
              this.ctx.beginPath();
              this.ctx.fillStyle = this.particleColor;
              this.ctx.globalAlpha = this.opacity;
              this.ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
              this.ctx.fill();
          };

          var ParticleNetwork = function(parent) {
              this.options = {
                  velocity: 1, // the higher the faster
                  density: 15000, // the lower the denser
                  netLineDistance: 200,
                  netLineColor: '#929292',
                  particleColors: ['#aaa'] // ['#6D4E5C', '#aaa', '#FFC458' ]
              };
              this.canvas = parent.canvas;
              this.ctx = parent.ctx;

              this.init();
          };

          ParticleNetwork.prototype.init = function() {
              // Create particle objects
              this.createParticles(true);

              // Update canvas
              this.animationFrame = requestAnimationFrame(this.update.bind(this));

              this.bindUiActions();
          };

          ParticleNetwork.prototype.createParticles = function(isInitial) {
              // Initialise / reset particles
              var me = this;
              this.particles = [];
              var quantity = this.canvas.width * this.canvas.height / this.options.density;

              if (isInitial) {
                  var counter = 0;
                  clearInterval(this.createIntervalId);
                  this.createIntervalId = setInterval(function() {
                      if (counter < quantity - 1) {
                          // Create particle object
                          this.particles.push(new Particle(this));
                      }
                      else {
                          clearInterval(me.createIntervalId);
                      }
                      counter++;
                  }.bind(this), 250);
              }
              else {
                  // Create particle objects
                  for (var i = 0; i < quantity; i++) {
                      this.particles.push(new Particle(this));
                  }
              }
          };

          ParticleNetwork.prototype.createInteractionParticle = function() {
              // Add interaction particle
              this.interactionParticle = new Particle(this);
              this.interactionParticle.velocity = {
                  x: 0,
                  y: 0
              };
              this.particles.push(this.interactionParticle);
              return this.interactionParticle;
          };

          ParticleNetwork.prototype.removeInteractionParticle = function() {
              // Find it
              var index = this.particles.indexOf(this.interactionParticle);
              if (index > -1) {
                  // Remove it
                  this.interactionParticle = undefined;
                  this.particles.splice(index, 1);
              }
          };

          ParticleNetwork.prototype.update = function() {
              if (this.canvas) {

                  this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
                  this.ctx.globalAlpha = 1;

                  // Draw connections
                  for (var i = 0; i < this.particles.length; i++) {
                      for (var j = this.particles.length - 1; j > i; j--) {
                          var distance, p1 = this.particles[i], p2 = this.particles[j];

                          // check very simply if the two points are even a candidate for further measurements
                          distance = Math.min(Math.abs(p1.x - p2.x), Math.abs(p1.y - p2.y));
                          if (distance > this.options.netLineDistance) {
                              continue;
                          }

                          // the two points seem close enough, now let's measure precisely
                          distance = Math.sqrt(
                              Math.pow(p1.x - p2.x, 2) +
                              Math.pow(p1.y - p2.y, 2)
                          );
                          if (distance > this.options.netLineDistance) {
                              continue;
                          }

                          this.ctx.beginPath();
                          this.ctx.strokeStyle = this.options.netLineColor;
                          this.ctx.globalAlpha = (this.options.netLineDistance - distance) / this.options.netLineDistance * p1.opacity * p2.opacity;
                          this.ctx.lineWidth = 0.7;
                          this.ctx.moveTo(p1.x, p1.y);
                          this.ctx.lineTo(p2.x, p2.y);
                          this.ctx.stroke();
                      }
                  }

                  // Draw particles
                  for (var i = 0; i < this.particles.length; i++) {
                      this.particles[i].update();
                      this.particles[i].draw();
                  }

                  if (this.options.velocity !== 0) {
                      this.animationFrame = requestAnimationFrame(this.update.bind(this));
                  }

              }
              else {
                  cancelAnimationFrame(this.animationFrame);
              }
          };

          ParticleNetwork.prototype.bindUiActions = function() {
              // Mouse / touch event handling
              this.spawnQuantity = 3;
              this.mouseIsDown = false;
              this.touchIsMoving = false;

              this.onMouseMove = function(e) {
                  if (!this.interactionParticle) {
                      this.createInteractionParticle();
                  }
                  this.interactionParticle.x = e.offsetX;
                  this.interactionParticle.y = e.offsetY;
              }.bind(this);

              this.onTouchMove = function(e) {
                  e.preventDefault();
                  this.touchIsMoving = true;
                  if (!this.interactionParticle) {
                      this.createInteractionParticle();
                  }
                  this.interactionParticle.x = e.changedTouches[0].clientX;
                  this.interactionParticle.y = e.changedTouches[0].clientY;
              }.bind(this);

              this.onMouseDown = function(e) {
                  this.mouseIsDown = true;
                  var counter = 0;
                  var quantity = this.spawnQuantity;
                  var intervalId = setInterval(function() {
                      if (this.mouseIsDown) {
                          if (counter === 1) {
                              quantity = 1;
                          }
                          for (var i = 0; i < quantity; i++) {
                              if (this.interactionParticle) {
                                  this.particles.push(new Particle(this, this.interactionParticle.x, this.interactionParticle.y));
                              }
                          }
                      }
                      else {
                          clearInterval(intervalId);
                      }
                      counter++;
                  }.bind(this), 50);
              }.bind(this);

              this.onTouchStart = function(e) {
                  e.preventDefault();
                  setTimeout(function() {
                      if (!this.touchIsMoving) {
                          for (var i = 0; i < this.spawnQuantity; i++) {
                              this.particles.push(new Particle(this, e.changedTouches[0].clientX, e.changedTouches[0].clientY));
                          }
                      }
                  }.bind(this), 200);
              }.bind(this);

              this.onMouseUp = function(e) {
                  this.mouseIsDown = false;
              }.bind(this);

              this.onMouseOut = function(e) {
                  this.removeInteractionParticle();
              }.bind(this);

              this.onTouchEnd = function(e) {
                  e.preventDefault();
                  this.touchIsMoving = false;
                  this.removeInteractionParticle();
              }.bind(this);

              this.canvas.addEventListener('mousemove', this.onMouseMove);
              this.canvas.addEventListener('touchmove', this.onTouchMove);
              this.canvas.addEventListener('mousedown', this.onMouseDown);
              this.canvas.addEventListener('touchstart', this.onTouchStart);
              this.canvas.addEventListener('mouseup', this.onMouseUp);
              this.canvas.addEventListener('mouseout', this.onMouseOut);
              this.canvas.addEventListener('touchend', this.onTouchEnd);
          };

          ParticleNetwork.prototype.unbindUiActions = function() {
              if (this.canvas) {
                  this.canvas.removeEventListener('mousemove', this.onMouseMove);
                  this.canvas.removeEventListener('touchmove', this.onTouchMove);
                  this.canvas.removeEventListener('mousedown', this.onMouseDown);
                  this.canvas.removeEventListener('touchstart', this.onTouchStart);
                  this.canvas.removeEventListener('mouseup', this.onMouseUp);
                  this.canvas.removeEventListener('mouseout', this.onMouseOut);
                  this.canvas.removeEventListener('touchend', this.onTouchEnd);
              }
          };

          var getLimitedRandom = function(min, max, roundToInteger) {
              var number = Math.random() * (max - min) + min;
              if (roundToInteger) {
                  number = Math.round(number);
              }
              return number;
          };

          var returnRandomArrayitem = function(array) {
              return array[Math.floor(Math.random()*array.length)];
          };

          let pna = new ParticleNetworkAnimation();
          pna.init($('.particle-network-animation')[0]);
      },
  },
  beforeDestroy () {
    document.body.classList.remove('userLayout')
  }
}
</script>

<style lang="less" scoped>
  #userLayout.user-layout-wrapper {
    height: 100%;
    /*background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;*/
    background: #f0f2f5;
    background-size: 100%;
    position: relative;
    /*canvas{*/
    /*  position: absolute;*/
    /*  top: 0;*/
    /*  left: 0;*/
    /*  width: 100%;*/
    /*  height: 100%;*/
    /*}*/
    &.mobile {
      .container {
        .main {
          max-width: 368px;
          width: 98%;
        }
      }
    }

    &.particle-network-animation {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      height: 100vh;
      background-color: #171717;
    }
    &.particle-network-animation::before {
      z-index: -2;
      content: '';
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-size: cover;
      opacity: 0.2;
    }

    .container {
      width: 100%;
      position: absolute;
      left:50%;
      top:45%;
      transform: translate(-50%, -50%);
      background-color: #ffffff;
      width: auto;
      padding: 40px 30px;
      /*min-height: 100%;*/
      /*background: #f0f2f5 url(~@/assets/background.svg) no-repeat 50%;*/
      /*background-size: 100%;*/
      /*padding: 110px 0 144px;*/
      /*position: relative;*/

      a {
        text-decoration: none;
      }

      .top {
        text-align: center;

        .header {
          height: 44px;
          line-height: 44px;

          .badge {
            position: absolute;
            display: inline-block;
            line-height: 1;
            vertical-align: middle;
            margin-left: -12px;
            margin-top: -10px;
            opacity: 0.8;
          }

          .logo {
            height: 44px;
            vertical-align: top;
            margin-right: 16px;
            border-style: none;
          }

          .title {
            font-size: 33px;
            color: rgba(0, 0, 0, .85);
            font-family: Avenir, 'Helvetica Neue', Arial, Helvetica, sans-serif;
            font-weight: 600;
            position: relative;
            top: 2px;
          }
        }
        .desc {
          font-size: 14px;
          color: rgba(0, 0, 0, 0.45);
          margin-top: 12px;
          margin-bottom: 40px;
        }
      }

      .main {
        min-width: 260px;
        width: 368px;
        margin: 0 auto;
      }

      .footer {
        position: absolute;
        width: 100%;
        bottom: 0;
        padding: 0 16px;
        margin: 48px 0 24px;
        text-align: center;

        .links {
          margin-bottom: 8px;
          font-size: 14px;
          a {
            color: rgba(0, 0, 0, 0.45);
            transition: all 0.3s;
            &:not(:last-child) {
              margin-right: 40px;
            }
          }
        }
        .copyright {
          color: rgba(0, 0, 0, 0.45);
          font-size: 14px;
        }
      }
    }
  }

  @media (max-width: 575px){
    #userLayout.user-layout-wrapper .container{
      top: 50%;
      /*padding: 0 15px;*/
      background-color: #ffffff;
      width: 90%;
      padding: 40px 20px;
    }
  }
</style>
